<template>
  <div>
    <el-button type="primary" @click="downloadImages">下载图片到test文件夹</el-button>
    <div v-if="downloadStatus" style="margin-top: 20px;">
      <p>{{ downloadStatus }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const list = [{
  name: '1',
  src: 'https://lumi-ai.oss-cn-hangzhou.aliyuncs.com/web_assets/enter1.png'
}, {
  name: '2',
  src: 'https://lumi-ai.oss-cn-hangzhou.aliyuncs.com/web_assets/enter2.png'
}, {
  name: '3',
  src: 'https://lumi-ai.oss-cn-hangzhou.aliyuncs.com/web_assets/enter3.png'
}]

const downloadStatus = ref('')

const downloadImages = async () => {
  if (!window.electronAPI) {
    ElMessage.error('Electron API 不可用，请在 Electron 环境中运行')
    return
  }

  try {
    downloadStatus.value = '正在下载图片...'
    const result = await window.electronAPI.downloadImages(list)
    
    if (result.success) {
      const successCount = result.results.filter(r => r.success).length
      const failCount = result.results.filter(r => !r.success).length
      downloadStatus.value = `下载完成！成功: ${successCount}，失败: ${failCount}`
      ElMessage.success(`下载完成！成功: ${successCount}，失败: ${failCount}`)
    } else {
      downloadStatus.value = `下载失败: ${result.error}`
      ElMessage.error(`下载失败: ${result.error}`)
    }
  } catch (error) {
    downloadStatus.value = `下载出错: ${error.message}`
    ElMessage.error(`下载出错: ${error.message}`)
  }
}
</script>